<template>
	<view style="position: relative;">
		<view style="padding: 10px;" class="box">
			<view style="display: flex;">
				<view style="flex: 2;">
					<view>
						<view style="display: flex;">
							<view style="flex: 3;display: flex;">
								<view style="font-weight: bold;font-size: 25px;margin-left: 20px;">{{DoctorData.name}}
								</view>
								<view
									style="border: 1px solid grey;background-color: gray;height: 20px;margin-top: 10px;margin-left: 4px;color: white;">
									离线</view>
							</view>
							<view style="display: flex; align-items: center; margin-top: 5px; margin-left: 15px;">
								<image @click="collect" v-if="!collectStar" src="../../static/icons/收藏.png"
									style="width: 50rpx;" mode="widthFix"></image>
								<image @click="collect" v-if="collectStar" src="../../static/icons/已收藏.png"
									style="width: 50rpx;" mode="widthFix">
								</image>
								<text style="font-size: 18px; margin-left: 5px;">关注</text>
							</view>
						</view>
						<view style="display: flex;margin-top: 10px;">
							<view style="margin-left: 20px;">{{DoctorData.staff}}</view>
							<view style="margin-left: 20px;">{{DoctorData.officeName}}</view>
							<view style="margin-left: 20px;">{{DoctorData.sex}}</view>
						</view>
						<view style="display: flex;margin-top: 10px;">
							<span style="margin-left: 20px;">{{DoctorData.hospitalName}}</span>
							<span class="square-box"
								style="margin-left: 20px;line-height: 10px;padding-top: 10rpx;font-size: 11px;">{{DoctorData.level}}</span>
							<label style="margin-left: 5px;font-size: 18px;" @click="goHospitalDetail(DoctorData.hospitalId)">></label>
						</view>
					</view>
				</view>
				<view style="flex: 1;margin-top: 10px;">
					<image :src="DoctorData.avatar" style="border-radius: 50%;width: 90px;height:90px">
					</image>
				</view>
			</view>
			<view style="margin-top: 10px;">
				<view style="margin-left: 20px;">
					<view style="display: flex;margin-top: 10px;">
						<span style="font-weight: bold;font-size: 20px;">99%</span>
						<span style="margin-left: 5px;margin-top: 5px;">接诊率</span>
						<span style="margin-left: 20px;font-weight: bold;font-size: 20px;">{{DoctorData.count}}</span>
						<span style="margin-left: 5px;margin-top: 5px;">问诊量</span>
						<view style="display: flex; color: red;justify-content: center;margin-left: 20px;">
							<view style="margin-top: 8rpx;">￥</view>
							<text style="font-size: 18px; margin-right: 10rpx;">{{DoctorData.price}}</text>
							<view style="margin-top: 10rpx;">起</view>
						</view>
						<span style="margin-left: 5px;margin-top: 5px;">预约价</span>
					</view>
					<view>
						<p style="margin-top:10px;">
							<view style="font-size: 16px;font-weight: bold;display: inline;">简介:</view>
							{{DoctorData.introduction}}
						</p>
						<p style="margin-top:10px;">
							<view style="font-size:16px;font-weight: bold;display: inline;">擅长:</view>
							{{DoctorData.skill}}
						</p>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 20px;">
			<view class="box">
				<view style="font-weight: bold;font-size: 20px;margin-top: 5px">出诊时间</view>
				<scroll-view scroll-x="true" show-scrollbar="false"
					style="white-space: nowrap; width: 100%;margin-top: 10px;">
					<view style="display: flex">
						<view>
							<view class="header-style">
								<label>预约</label><br><label>日期</label>
							</view>
							<view style="margin-top:14px;font-size: 14px;font-weight: bold">
								<label style="margin-left: 20px">上午</label>
							</view>
							<view style="border-bottom: 2px solid #efeeee;margin-top: 22px"></view>
							<view style="margin-top:14px;font-size: 14px;font-weight: bold">
								<label style="margin-left: 20px">下午</label>
							</view>
							<view style="border-bottom: 2px solid #efeeee;margin-top: 22px"></view>
							<view style="margin-top:14px;font-size: 14px;font-weight: bold">
								<label style="margin-left: 20px">晚上</label>
							</view>
							<view style="border-bottom: 2px solid #efeeee;margin-top: 22px"></view>
						</view>
						<view v-for="item in DatesAndWeekdays" :key="item.id">
							<view class="header-style">
								<label>{{ item.date }}</label><br><label>{{ item.weekday }}</label>
							</view>
							<view style="position: relative;">
								<view style="margin-left: 10px;margin-top: 10px; position: absolute; left: 0; top: 0;">
									<button type="primary" size="mini" style="line-height: 30px;"
										@tap="toReservation(DoctorData.id,item.date,'上午(7:00-11:00)')"
										v-if="filteredPlanData(item.weekday,'上午')">预约</button>
								</view>
								<view
									style="border-bottom: 1px solid #efeeee; position: absolute; left: 0; top: 55px; width: 100%;">
								</view>
								<view
									style="margin-left: 10px;margin-top: 10px; position: absolute; left: 0; top: 60px;">
									<button type="primary" size="mini" style="line-height: 30px;"
										@tap="toReservation(DoctorData.id,item.date,'下午(14:00-18:00)')"
										v-if="filteredPlanData(item.weekday,'下午')">预约</button>
								</view>
								<view
									style="border-bottom: 2px solid #efeeee;margin-top: 10px; position: absolute; left: 0; width: 100%;top: 102px;">
								</view>
								<view
									style="margin-left: 10px;margin-top: 10px; position: absolute; left: 0; top: 120px;">
									<button type="primary" size="mini" style="line-height: 30px;"
										@tap="toReservation(DoctorData.id,item.date,'晚上(20:00-24:00)')"
										v-if="filteredPlanData(item.weekday,'晚上')">预约</button>
								</view>
								<view
									style="border-bottom: 2px solid #efeeee;margin-top: 10px; position: absolute; left: 0;width: 100%; top: 159px;">
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="box" style="margin-top: 20px;">
				<view style="font-weight: bold;font-size: 20px;margin-top: 5px">咨询方式</view>
				<view style="display: flex;gap: 10px;margin-top: 10px;">
					<view style="flex: 1;text-align: center;" class="resizable-box"
						:class="{ 'active' : currentActive === '在线咨询' }" @click="changeActive('在线咨询')">
						<image src="../../static/icons/在线咨询.png" style="width:100rpx;" mode="widthFix"></image>
						<view style="margin-top: 5px;font-size: 20px;font-weight: bold;">
							在线咨询</view>
						<view style="display: flex; color: red;justify-content: center;margin-top: 10px;">
							<view style="margin-top: 10rpx;">￥</view>
							<text style="font-size: 20px; margin-right: 10rpx;">20</text>
							<view style="margin-top: 10rpx;">/小时 起</view>
						</view>
					</view>
					<view style="flex: 1;text-align: center;" class="resizable-box"
						:class="{ 'active' : currentActive === '电话咨询' }" @click="changeActive('电话咨询')">
						<image src="../../static/icons/电话.png" style="width:100rpx;" mode="widthFix"></image>
						<view style="margin-top: 5px;font-size: 20px;font-weight: bold;">电话咨询</view>
						<view style="display: flex; color: red;justify-content: center;margin-top: 10px;">
							<view style="margin-top: 10rpx;">￥</view>
							<text style="font-size: 20px; margin-right: 10rpx;">30</text>
							<view style="margin-top: 10rpx;">/小时 起</view>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex;margin: 10px 0;" class="box">
				<view style="display: flex;flex: 1;margin-left: 10px;">
					<image src="../../static/icons/身份证.png" style="width: 50rpx;" mode="widthFix"></image>
					<view style="margin-top: 5px;">保证医生真实</view>
				</view>
				<view style="display: flex;flex: 1;margin-left: 10px;">
					<image src="../../static/icons/钱袋.png" style="width: 50rpx;" mode="widthFix"></image>
					<view style="margin-top: 5px;">未解决随时退</view>
				</view>
				<view style="display: flex;flex: 1;margin-left: 10px;">
					<image src="../../static/icons/申诉.png" style="width: 40rpx;margin-top: 2px;" mode="widthFix">
					</image>
					<view style="margin-top: 5px;">不满意可申诉</view>
				</view>
			</view>
			<view style="margin-top: 20px;min-height: 500px;" class="box">
				<view style="display: flex;">
					<view style="flex: 2;">
						<span style="font-size: 20px;font-weight: bold;">患者评价</span>
						<span>({{userCommentData.length}})</span>
					</view>
					<view style="flex: 1;margin-top: 8px;margin-left: 120px;">
						<span>查看全部</span>
						<span>></span>
					</view>
				</view>
				<view style="padding: 10px;display: flex;">
					<view>
						<view v-for="item in userCommentData" style="margin-top: 15px;">
							<view style="display: flex;">
								<view style="width: 40px;">
									<image :src="item.userList[0].avatar"
										style="height: 40px; width: 40px; border-radius: 50%"></image>
								</view>
								<view style="width: 300px; margin-left: 10px;">
									<view style="display: flex;">
										<view style="font-weight: 700; font-size: 17px; color: #000000FF;">
											{{item.userList[0].name}}
										</view>
										<uni-rate :value="item.star" style="margin-left: 10px;" readonly="true" />
										<span style="margin-left: 10px;">{{item.type}}</span>
									</view>
									<view style="display: flex;color: #7A7A7AFF;width: 1000px;">
										<span>{{item.time}}</span>
										<span style="margin-left: 10px;">{{item.title}}</span>
									</view>
								</view>
							</view>
							<view style="margin-top: 10px; font-size: 16px;">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user'),
				PlanData: [],
				DoctorData: {},
				doctorId: '',
				currentActive: null,
				DatesAndWeekdays: {},
				collectStar: false,
				clickStar: false,
				userCommentData: '',
			}
		},
		onLoad(option) {
			this.doctorId = option.doctorId; // 转换为整数
		},
		onShow() {
			this.getDatesAndWeekdays()
			this.loadDoctor()
			this.loadCollect()
			this.loadClick()
			this.loadUserComment()
		},
		methods: {
			loadUserComment() {
				this.$request.get(`/userComment/selectByFid/${this.doctorId}/${encodeURIComponent('DOCTOR')}`).then(
					res => {
						if (res.code === '200') {
							// 按销量从高到低排序
							this.userCommentData = res.data;
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			loadClick() {
				this.$request.get(
						`/like/selectByUserId/${this.user.id}/${this.doctorId}/${encodeURIComponent('DOCTOR')}`)
					.then(res => {
						if (res.data !== null) {
							this.clickStar = true;
						}
					});
			},
			click() {
				let data = {
					userId: this.user.id,
					fid: this.doctorId,
					module: 'DOCTOR'
				};
				this.clickStar = !this.clickStar;
				this.$request.post('/like/save', data).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '点赞成功'
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
			},
			loadCollect() {
				this.$request.get(
						`/collect/selectByUserId/${this.user.id}/${this.doctorId}/${encodeURIComponent('DOCTOR')}`)
					.then(res => {
						if (res.data !== null) {
							this.collectStar = true;
						}
					});
			},
			collect() {
				let data = {
					userId: this.user.id,
					fid: this.doctorId,
					module: 'DOCTOR'
				};
				this.collectStar = !this.collectStar;
				this.$request.post('/collect/save', data).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '收藏成功'
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
			},
			chat(chatId) {
				// 发送第一个请求以获取 chatRoleId1 和 chatRoleId2
				this.$request.post('/chatRole/add', {
					chatUserId: chatId,
					userId: this.user.id
				}).then(res => {
					if (res.code === '200') {
						// 获取返回的 mapData
						const resultMap = res.data; // resultMap 应该包含 chatRoleId1 和 chatRoleId2
						// 从 resultMap 中提取 ID
						const chatRoleId1 = resultMap.chatRoleId1;
						const chatRoleId2 = resultMap.chatRoleId2;
						// 使用提取的 ID 发送第二个请求
						this.$request.post('/chatGroup/add', {
							chatUserId: chatRoleId1,
							userId: chatRoleId2
						}).then(res => {
							if (res.code === '200') {
								// 请求成功，跳转到聊天页面
								this.$router.push({
									path: '/pages/chatDetail/chatDetail',
									query: {
										chatId: chatId,
										role: 'DOCTOR'
									}
								});
							} else {
								// 显示错误信息
								this.$message.error(res.msg);
							}
						});
					} else {
						// 显示错误信息
						this.$message.error(res.msg);
					}
				});
			},
			goHospitalDetail(hospitalId) {
				uni.navigateTo({
					url: '/pages/hospitalDetail/hospitalDetail?hospitalId=' + hospitalId
				})
			},
			toReservation(id, date, time) {
				uni.navigateTo({
					url: `/pages/ReservationDetail/ReservationDetail?doctorId=${id}&date=${date}&time=${time}`
				})
			},
			loadDoctor() {
				this.$request.get(`/doctor/selectByDoctorId/${this.doctorId}`).then(res => {
					if (res.code === '200') {
						this.DoctorData = res.data;
						this.PlanData = this.DoctorData.planList;
					}
				}).catch(error => {
					// 处理可能发生的错误
					this.$message.error('加载医生信息失败');
					console.error(error);
				});
			},
			filteredPlanData(week, time) {
				return this.PlanData.some(plan => plan.week === week && plan.time.includes(time));
			},
			toShow() {
				uni.showToast({
					icon: 'error',
					title: '该功能还未开发'
				})
			},
			changeActive(active) {
				this.currentActive = active
				if(active==='在线咨询'){
					this.chat(this.doctorId)
				}else{
					this.toShow()
				}

			},
			goMyReservation() {
				uni.navigateTo({
					url: '/pages/myReservation/myReservation'
				})
			},
			getDatesAndWeekdays() {
				// 获取今天的日期
				const today = new Date();
				// 创建一个空数组用于存储结果
				const result = [];
				// 星期名称数组
				const weekDayNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				// 遍历从今天开始的7天的日期
				for (let i = 0; i < 7; i++) {
					// 计算当前日期
					const currentDate = new Date(today);
					currentDate.setDate(today.getDate() + i);
					// 获取日期信息
					const month = currentDate.getMonth() + 1; // 月份从0开始
					const day = currentDate.getDate();
					const weekDayName = weekDayNames[currentDate.getDay()];
					// 将日期和星期名称添加到结果数组中
					result.push({
						date: `${month}月${day}日`, // 修改日期格式为月日形式
						weekday: weekDayName
					});
				}
				this.DatesAndWeekdays = result;
			},
		}
	}
</script>

<style>
	.active {
		border: 2px solid #189500;
		color: #189500;
	}



	.header-style {
		margin-left: 2px;
		font-size: 14px;
		line-height: 20px;
		font-weight: bold;
		width: 80px;
		text-align: center;
		background-color: #007D67;
		padding: 5px;
		box-sizing: border-box;
	}
</style>